<template>
  <div class="app-container content-information">
    <div class="ccui-navigation">
      <el-button
        size="mini"
        type="primary-icon-medium"
        icon="icon-ccui-return"
        @click="handleBack"
        >返回</el-button
      >
      <div class="ccui-navigation-divider" />
      <!-- 面包屑 -->
      <el-breadcrumb
        class="ccui-navigation-crumbs-container"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item :to="{ path: firstPath }">{{
          appName
        }}</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/powerManage/powerManageList' }"
          >权限管理</el-breadcrumb-item
        >
        <el-breadcrumb-item
          >权限维护
          <span class="ccui-curr-crumb" style="margin-left: 10px">
            {{ roleName }}</span
          ></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>

    <div class="el-main el-power-main ccui-app-container-detail">
      <div class="ccui-search-wrapper ccui-clearfix">
        <div class="ccui-tab-wrapper fl">
          <el-button type="table-top-active" size="mini">功能权限</el-button>
        </div>
      </div>

      <div
        class="multifunctional-table-wrapper powerManageMaintain"
        ref="thatTable"
      >
        <el-checkbox-table-checked
          :checkboxData="checkboxData"
          @childrenSelected="childrenSelected"
          :disabledFlag="disabled"
        >
        </el-checkbox-table-checked>
      </div>
    </div>

    <el-bottom-guide v-if="!disabled">
      <ul class="ccui-bottom-button">
        <li>
          <el-button type="bottom" icon="icon-ccui-return" @click="handleBack"
            >返回</el-button
          >
        </li>
        <li class="ccui-bottom-guide-divider"></li>
        <li>
          <el-button type="bottom" icon="icon-ccui-save" @click="updateRoleMenu"
            >保存</el-button
          >
        </li>
        <li>
          <el-button type="bottom" icon="icon-ccui-cancel" @click="resetHandle"
            >取消</el-button
          >
        </li>
      </ul>
    </el-bottom-guide>
  </div>
</template>

<script>
import { getRoleMenu, editRoleMenu } from "../api/powerManage";
import getMenuaa from "../mixins/getMenu.js";
// import store from "@/config/store";
export default {
  name: "powerManageMaintain",
  mixins: [getMenuaa],
  data() {
    return {
      appName: JSON.parse(sessionStorage.userDetal).agentName,
      funWidth: "auto",
      roleName: "",
      powerlist: [],
      menu: [],
      disabled: false,
      roleType: "",
      checked1: false,
      checkboxData: [],
      params: null
    };
  },
  mounted() {
    this.funWidth = this.$refs["thatTable"].offsetWidth - 2 - 200;
    //this.getRoleName()
    this.getRoleMenu();
    this.roleType = this.$route.params.roleType;
    if (this.roleType === "0" || this.roleType === "1") {
      this.disabled = true;
    }
  },
  methods: {
    childrenSelected(val) {
      console.log("已选择", val);
      this.params = val;
    },
    getRoleMenu() {
      // 请求角色菜单
      let obj = {
        roleId: this.$route.params.roleId,
        roleType: Number(this.$route.params.roleType),
        isShowPageLoading: true
      };
      getRoleMenu(obj).then(res => {
        // 格式化数据
        this.roleName = res.data.data[0].roleName;
        this.params = JSON.parse(JSON.stringify(res.data.data));
        res.data.data.forEach(i => {
          i.funcs.forEach(j => {
            j.sons = j.sons.filter(p => !(p.isShow === 0));
          });
        });
        console.log(res.data.data);
        res.data.data.forEach(item => {
          item.funcs.forEach(item1 => {
            if (item1.sons.length > 0) {
              item1.sons.forEach((item2, index) => {
                if (item2.isUseable == 1) {
                  item2.selected = true;
                } else {
                  item2.selected = false;
                }
              });
              if (item1.sons.some(i => i.selected === true)) {
                item1.selected = false;
                item1.isIndeterminate = true;
                item.checkAll = false;
                item.isIndeterminate = true;
              }
              if (item1.sons.every(i => i.selected === true)) {
                item1.selected = true;
                item1.isIndeterminate = false;
                if (item.funcs.every(i => i.selected === true)) {
                  item.checkAll = true;
                  item.isIndeterminate = false;
                }
              }
              if (item1.sons.every(i => i.selected === false)) {
                item1.selected = false;
                item1.isIndeterminate = false;
                if (
                  item.funcs.every(
                    i => i.selected === false && i.isIndeterminate != true
                  )
                ) {
                  item.checkAll = false;
                  item.isIndeterminate = false;
                }
              }
            } else if (item1.isUseable == 1) {
              item1.selected = true;
              if (item.funcs.every(i => i.selected === false)) {
                item.checkAll = false;
                item.isIndeterminate = false;
              } else if (item.funcs.every(i => i.selected == true)) {
                item.checkAll = true;
                item.isIndeterminate = false;
              }
            }
          });
        });
        // this.powerlist = res.data.data
        this.checkboxData = res.data.data;
        console.log(this.checkboxData);
      });
    },
    formatData(data) {
      data.map(res => {
        res.checked = true;
        if (res.sons && res.sons.length > 0) {
          this.formatData(res.sons);
        }
        return res;
      });
    },
    handleBack() {
      // 返回
      this.$router.push({ path: "/powerManage/powerManageList" });
    },
    updateRoleMenu() {
      // 保存
      editRoleMenu({
        roleId: this.$route.params.roleId,
        infos: this.params,
        isShowLoading: true
      }).then(res => {
        this.$message({
          message: this.tips.empowerSuccessTip,
          type: "success",
          duration: 3000,
          ccuiCustom: true,
          showClose: true,
          offset: document.body.clientHeight / 2 - 21
        });
        // this.$store.dispatch("setMenu",[])
        this.getMenu();
      });
      // .catch(erro => {
      //     console.log(erro)
      // })
    },
    resetHandle() {
      // 取消
      this.getRoleMenu();
    }
  },
  computed: {
    firstPath() {
      return this.$store.getters.addRouters[0].path;
    }
  }
};
</script>
<style lang="scss" scoped>
//@import "../../../config/styles/variables";

.app-container {
  background: none;
  padding: 0;
}

.powerManageMaintain {
  padding-top: 20px;
}

.el-power-main {
  min-height: calc(100vh - 260px);
}
.app-container {
  min-height: auto;
}
/deep/.el-table td div {
  line-height: 27px;
}
</style>
